<template>
    <div class="boxs">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="appName">
                    <el-select v-model="queryParams.package_name" @change="handleQuery">
                        <el-option v-for="item in pkList" :key="item.package_name" :label="item.shortName"
                            :value="item.package_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="status">
                    <el-select v-model="queryParams.status" @change="handleQuery">
                        <el-option v-for="item in stateList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="update_time">
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        :start-placeholder="$t('table.start')" :end-placeholder="$t('table.end')" @change="timeChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small"
                        @click="handleQuery">{{ $t('table.search') }}</el-button>
                    <el-button icon="el-icon-refresh" size="small"
                        @click="resetQuery">{{ $t('table.reset') }}</el-button>
                </el-form-item>
            </el-form>
            <div class="flex_between">
                <div></div>
                <el-button type="primary" size="small" @click="goForm">Add+</el-button>
            </div>

            <el-table border :data="moreArr" style="margin-top: 15px" v-loading="loading">
                <el-table-column label="index" align="center" width="60" type="index" />
                <el-table-column label="appName" align="center" width="140" prop="shortName">
                    <template slot-scope="scope">
                        <div :style="{ color: scope.row.files ? 'red' : 'inherit' }">
                            {{ scope.row.shortName }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="c_version" width="90" align="center" prop="c_version" />
                <el-table-column label="title" align="center" prop="update_summary" />

                <el-table-column label="up__version" width="120" align="center" prop="version" />

                <el-table-column label="upType" width="90" align="center" prop="update_type">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.update_type == 0">Optional</el-tag>
                        <el-tag type="danger" v-if="scope.row.update_type == 1">Forced</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="is_active" width="100" align="center" prop="is_active">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_active == 0">true</el-tag>
                        <el-tag type="danger" v-if="scope.row.is_active == 1">false</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="effective_time" align="center" width="160" prop="effective_datetime" />
                <el-table-column label="create_time" align="center" width="160" prop="create_time" />
                <el-table-column label="update_time" align="center" width="160" prop="update_time" />

                <el-table-column :label="$t('feedback.operate')" align="center" width="250">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" v-if="scope.row.status == 0"
                            @click="handleChange(scope.$index, scope.row)">publish</el-button>
                        <el-button size="mini" type="danger" v-if="scope.row.status == 1"
                            @click="handleChange(scope.$index, scope.row)">stop</el-button>
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">edit</el-button>
                        <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">delete</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
        </el-card>

        <el-dialog :title="$t('feedback.operate')" :visible.sync="dialogVisible" width="800px">
            <el-form class="demo-form-inline" label-width="140px" :model="form" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.FeedbackType')" prop="reviewId">
                            <el-input disabled v-model="form.feedback_type" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="ip">
                            <el-input disabled v-model="form.ip" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.PackageName')" prop="name">
                            <el-input disabled v-model="form.pk" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.DeviceLanguage')">
                            <el-input disabled v-model="form.lang" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.Version')" prop="name">
                            <el-input disabled v-model="form.ver" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.DeviceID')">
                            <el-input disabled v-model="form.uuid" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.CountryCode')" prop="name">
                            <el-input disabled v-model="form.country" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.SDK')">
                            <el-input disabled v-model="form.sdk" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.tvModel')" prop="name">
                            <el-input disabled v-model="form.tvModel" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.email')">
                            <el-input disabled v-model="form.email" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.InternetServiceProvider')" prop="name">
                            <el-input disabled v-model="form.isp" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.installationtime')" prop="name">
                            <el-input disabled v-model="form.first_install_time" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.Operator')">
                            <el-input disabled v-model="form.operator" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.NetworkType')" prop="name">
                            <el-input disabled v-model="form.network_type" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('feedback.FeedbackContent')">
                            <el-input :autosize="{ minRows: 4 }" type="textarea" disabled v-model="form.description"
                                placeholder="" resize="none" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div class="flex_">
                            <el-form-item :label="$t('feedback.Translate')">
                                <el-select v-model="goalLanguage">
                                    <el-option v-for="item in languageList" :key="item.id" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-button style="margin-bottom: 22px;margin-left: 20px;" :loading="translateLoading"
                                @click="translateHandel" type="primary">{{ $t('feedback.Translate') }}</el-button>
                        </div>
                    </el-col>
                    <el-col :span="24" v-if="languageContent">
                        <el-form-item :label="$t('feedback.TranslateContent')">
                            <el-input :autosize="{ minRows: 4 }" type="textarea" disabled v-model="languageContent"
                                :placeholder="$t('feedback.TranslateContent')" resize="none" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.log_entry">
                        <el-form-item :label="$t('feedback.log_entry')">
                            <el-input :autosize="{ minRows: 4 }" type="textarea" disabled v-model="form.log_entry"
                                resize="none" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.files">
                        <el-form-item :label="$t('feedback.FeedbackImage')">
                            <el-image v-for="(item, k) in form.files" :key="k" style="width: 150px; height: 150px"
                                :src="item" :preview-src-list="form.files">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('feedback.FeedbackVideo')" v-if="form.videoUrl">
                            <video controls muted v-for="(item, k) in form.videoUrl" :key="k"
                                style="width: 150px; height: 150px" :src="item"></video>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('feedback.ProcessingStatus')">
                            <el-radio v-model="form.state" label="0">{{ $t('feedback.No') }}</el-radio>
                            <el-radio v-model="form.state" label="1">{{ $t('feedback.Yes') }}</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('tagsView.close') }}</el-button>
                <el-button type="warning" @click="affirm">{{ $t('table.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getFeedback, getPkList, editFeedbackState } from "@/api/feedback";
import { getAppVersionPkList, getAppVersionList, save } from "@/api/appVersion";
import pk from "@/utils/pk";
export default {
    name: "appMonitor",
    data() {
        return {
            languageContent: '',
            goalLanguage: "zh_CN",
            languageList: [],
            translateLoading: false,
            pkList: [],
            stateList: [
                {
                    id: '0',
                    name: "已停用",
                },
                {
                    id: '1',
                    name: "已启用",
                },
            ],
            queryParams: {
                page: 1,
                size: 10,
                dateRange: {
                    start: "",
                    end: "",
                },
                status: "",
                package_name: "",
            },
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible: false,
            form: {
                comment_type: "",
            },
            search: "",
            rules: {
                comment_type: [
                    { required: true, message: "请输入类型", trigger: "blur" },
                ],
            },
            value1: "",
        };
    },
    mounted() {
        if (this.$route.query.refresh) {
            console.log('走这里')
            this.getMore();
        }
    },

    created() {
        this.getMore();

        this.getPkListHandel();
        // this.getLanguageList();
    },
    methods: {
        goForm() {

            this.$router.push({
                path: "/appVersion/add"
            });
        },
        copyEmail1(data) {
            const input = document.createElement('textarea');
            input.value = data;
            document.body.appendChild(input);
            input.select();
            try {
                document.execCommand('copy');
                this.$message({
                    message: 'Text copied to clipboard!',
                    type: 'success'
                });
            } catch (err) {
                this.$message({
                    message: 'Failed to copy text.',
                    type: 'error'
                });
            }
            document.body.removeChild(input);
        },
        timeChange() {
            this.queryParams.dateRange.start = this.value1[0];
            this.queryParams.dateRange.end = this.value1[1];
            this.handleQuery();
        },
        getKeyByValue(object, value) {
            return Object.keys(object).find((key) => object[key] === value);
        },
        async getMore() {
            this.loading = true;
            let { data, total } = await getAppVersionList(this.queryParams);
            this.loading = false;
            this.moreArr = data;
            this.total = total;
        },
        async getLanguageList() {
            let { data } = await getLanguage({
                package_name: this.queryParams.package_name,
            });
            this.languageList = data.map((item) => ({
                id: item.reviewer_language,
                name: item.reviewer_language,
            }));
        },
        async translateHandel() {
            this.languageContent = "";
            this.translateLoading = true;
            let { data } = await gptTranslate({
                language: this.goalLanguage,
                translateText: this.form.description,
            });
            this.translateLoading = false;
            if (data.code == 0) {
                this.languageContent = data.data.answer;
            }
        },
        async getPkListHandel() {
            let { data } = await getAppVersionPkList({ page: 1, size: 999 });
            this.pkList = data;
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getMore();
        },
        async affirm() {
            this.form.package_name = this.queryParams.package_name;
            this.$refs["ruleForm"].validate(async (valid) => {
                if (!valid) return;
                try {
                    this.addLoading = true;
                    await editFeedbackState(this.form);
                    this.addLoading = false;
                    this.$message.success("操作成功");
                    this.getMore();
                    this.dialogVisible = false;
                } catch (e) {
                    this.addLoading = false;
                }
            });
        },
        openDialog() {
            this.form = {};
            this.dialogVisible = true;
        },
        handleEdit(i, row) {
            this.form = { ...row };
            this.$router.push({
                path: "/appVersion/add",
                query: { formData: JSON.stringify(this.form) }
            });
        },
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(async () => {
                row.state = 1
                const query = {
                    ...row
                }
                await save(query);
                this.getMore();
                this.$message({
                    message: "删除成功！",
                    type: "success",
                });
            });
        },
        handleChange(index, row) {
            let obj = JSON.parse(JSON.stringify(row))
            let text = `此操作将停用该数据, 是否继续?`
            if (obj.status == 0) {
                obj.status =1
                text = `此操作将启用该数据, 是否继续?`
            } else {
                obj.status = 0
            }
            this.$confirm(text, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(async () => {
                const query = {
                    ...obj
                }
                await save(query);
                this.getMore();
                this.$message({
                    message: "success",
                    type: "success",
                });
            });
        },
        resetQuery() {
            this.queryParams.status = null;
            this.queryParams.package_name = null;
            this.queryParams.dateRange.start = null;
            this.queryParams.dateRange.end = null;
            this.queryParams.page = 1;
            this.value1 = "";
            this.getMore();
        },
    },
};
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}

::v-deep.el-input.is-disabled .el-input__inner {
    color: #333 !important;
}

::v-deep.el-textarea.is-disabled .el-textarea__inner {
    color: #333 !important;
}

::v-deep .el-image {
    margin-right: 8px;
    border-radius: 4px;
}
</style>